<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文献资源管理系统-参数管理加载示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 600px;
        height: 327px;
        margin: auto;
    }
</style>
<body >
    <div class="page wrap-week" id="app">
   
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="card card-echarts">
                <div class="card-header"><p></p></div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div id="container" style="height: 600px; width :100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   


<!-- ./wrapper -->
<script src="lib/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script src="lib/walden.js"></script>

<script src="lib/mm.echarts.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
  $(function(){

    $.ajax({
            dataType:"json",
            type:"get",
            url:"http://29n01o8660.oicp.vip/server/findparamtree",
            success:function(data){
                datalist(data)
            },error:function(data){
                alert(系统错误);
            }
        });
  })

  //1.准备树的数据
  var treeData ;
  function datalist(data){
    treeData = transData(data, 'id', 'pId', 'children');
        //3.展示数据
    drawTree(treeData);
        console.log(treeData)
    
  }

/**2.数据处理成层级关系的数据***/ 
function transData(a, idStr, pidStr, childrenStr) {
	var r = [], hash = {}, id = idStr, pid = pidStr, children = childrenStr, i = 0, j = 0, len = a.length;
	for (; i < len; i++) {
		hash[a[i][id]] = a[i];
	}
	for (; j < len; j++) {
		var aVal = a[j], hashVP = hash[aVal[pid]];
		if (hashVP) {
			!hashVP[children] && (hashVP[children] = []);
			hashVP[children].push(aVal);
		} else {
			r.push(aVal);
		}
	}
	return r;
}
 
/**
 *3. 画树
 */
function drawTree(treeData) {
	var  myChart = echarts.init(document.getElementById("container"));//div元素节点的对象

	myChart.setOption({
		tooltip : {
			trigger : 'item',
			triggerOn : 'mousemove'
		},
		series : [ {
			type : 'tree',
			name : 'TREE_ECHARTS',
			data : treeData,
			top : '2%',
			left : '10%',
			bottom : '2%',
			right : '15%',
			symbolSize : 7,
            // orient: 'vertical', // 切换横/竖
			label : {
				normal : {
					position : 'left',
					verticalAlign : 'middle',
					align : 'right'
				}
			},
			leaves : {
				label : {
					position : 'right',
					verticalAlign : 'middle',
					align : 'left'
				}
			},
			expandAndCollapse : true ,
			initialTreeDepth : 5  //展示层级数,默认是2
		} ]
	});
	//4.树绑定事件
	 myChart.on('click', function(params) {
		var name = params.data.name;//点击的节点的name
		var id = params.data.id;//点击的节点的id
		//调用点击事件
    	clickNode(name,id);
	}); 
}
//节点的点击事件
function clickNode(name,id){
	// alert(name+'--的值：'+id);
}
</script>

</body>
</html>